<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  /*其中最有用的应该就是min-content 了。这个关键字将解析为这个容器内
部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元
素）1①。这正是我们梦寐以求的！现在，使用以下两行简单的CSS 代码就可以
把figure 设置为恰当的宽度*/
  /*为了给那些旧版浏览器提供一个平稳的回
退样式，我们需要在使用这个技巧的同时，提供一个固定的max-width 值，*/
  
  figure {
    max-width: 300px;
    max-width: min-content;
    margin: auto;
  }
  
  figure>img {
    max-width: inherit
  }
  /* Basic styling */
  
  figure {
    padding: 10px;
    border: 1px solid silver;
  }
</style>

<body>
  <p>Some text [...]</p>
  <figure>
    <img src="../adam-catlace.png" />
    <figcaption>
      The great Sir Adam Catlace was named after Countess Ada Lovelace, the first programmer.
    </figcaption>
  </figure>
  <p>More text [...].</p>
</body>

</html>